<template>
	<view>
		<view class="main-box">
			<view class="main-title">订单信息</view>
			<view class="flex justify-between">
				<view class="left-title">退款日期</view>
				<view	 class="right-text">
					{{reletData.checkInTime|formatDate('MM月dd日')}} -
					{{reletData.checkOutTime|formatDate('MM月dd日')}} {{subDay}}晚</view>
			</view>
			<view class="flex justify-between" v-for="(item,index) in reletData.orderRefundItemList">
				<view class="left-title">{{item.refundType==1?'房费':item.refundType==2?'押金':'损坏赔偿'}}</view> <text
					class="right-text">￥{{item.itemSum}}</text>
			</view>
			<view class="flex justify-between" v-if="reletData.couponPrice">
				<view class="left-title">优惠券</view> <text class="right-text">-￥{{reletData.couponPrice}}</text>
			</view>
      <view class="flex justify-between">
        <view class="left-title">退款金额</view> <text class="right-text">{{reletData.refundTotal}}</text>
      </view>
		</view>
		<view class="tip-mini flex align-center">
			<u-icon name="info-circle"></u-icon>
			押金费用将在退订成功后退回原支付渠道
		</view>
		<button @click="toSelect" class="next-btn">下一步</button>
	</view>
</template>

<script>
	import {
		computeRefund,
		cancelReservation,
		getInfoByUser
	} from '@/api/order';
	import {
		DateDiff,
	} from '@/utils/time.js'
	export default {

		data() {
			return {
				orderId: '',
				orderInfo: {},
				reletData: {}
			}
		},
		computed: {
			subDay: {
				get() {
					return DateDiff(this.reletData.checkInTime, this.reletData.checkOutTime)
				},
				set() {

				}

			},
		},
		onLoad(opt) {
			this.orderId = opt.orderId;
			this.getInfo();
			this.getData();
		},
		methods: {
			getInfo() {
				getInfoByUser(this.orderId).then(res => {
					let data = res.data;
					this.orderInfo = data;
				})
			},
			toSelect() {
				// uni.navigateTo({
				// 	url: `/pages/main/order/cancelCause?orderId=${this.orderId}`
				// })
        this.$tab.redirectTo(`/pages/main/order/cancelCause?orderId=${this.orderId}`)
			},
			cancel() {
				let data = {
					orderId: this.orderId,
					recordReason: '不住了'
				}
				cancelReservation(data).then(res => {

				})
			},
			getData() {
				computeRefund(this.orderId).then(res => {
					this.reletData = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.state-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 44rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.state-tip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #595959;
		margin-left: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.house-box {
		margin-top: 24rpx;

		.btn-box {
			width: 298rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #C1C1C1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #111111;
			line-height: 68rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 2rpx;
			}
		}

		.house-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 18rpx;
		}

		.tip-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.house-img {
			width: 132rpx;
			height: 132rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-right: 18rpx;
		}

	}

	.main-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		padding: 20rpx 30rpx;
		margin-top: 30rpx;
	}

	.main-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 30rpx;
	}

	.left-title {
		width: 112rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		font-style: normal;
		text-transform: none;
		margin-bottom: 30rpx;
	}

	.right-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #111111;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.right-price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 26rpx;
		color: #111111;
		font-style: normal;
		text-transform: none;
	}

	.bottom-box {
		width: 750rpx;
		height: 124rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2

		.btn {
			width: 222rpx;
			height: 88rpx;
			background: #FF7947;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-right: 30rpx;

		}

		.left-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-decoration-line: underline;
			text-transform: none;
			margin-left: 30rpx;
		}

	}

	.next-btn {
		width: 690rpx;
		height: 94rpx;
		line-height: 94rpx;
		background: #FF7947;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 64rpx;
		margin-left: 30rpx;
	}

	.tip-mini {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
	}
</style>
